//后续添加的功能，撤销删除，设置提醒，键盘Enter添加待办，localStorage持久化存储
//整体改架构，待办：大标题---副待办
//添加到列表中
function addList() {
    // alert(1);
    var new_todo_content = $("#new-input").val();
    //判断内容是否为空
    if (new_todo_content === "") {
        alert("请输入内容");
        return;
    }
    console.log("新增待办：" + new_todo_content); //问题：input内容用val获取
    var new_todo = $("<li></li>");
    //待办三要素：1、是否完成（多选框）2、待办具体内容3、删除待办按钮
    var new_checkbox = "<input type='checkbox' name='' id='' class='complete_box'>";
    var new_content = "<p>" + new_todo_content + "</p>";
    var new_delBtn = "<a href='javascript: ;' class='deleteBtn'>删除</a>"
    new_todo.html(new_checkbox + new_content + new_delBtn);
    $(".list_tobeProcessed").prepend(new_todo);
    //下滑动画
    new_todo.stop().slideDown("fast");
    //发布以后清空输入框
    $("#new-input").val("");
    //展示待办事项
    $(".list_tobeProcessed").stop().show("fast");
}
$(function() {
    $("#new-input").on("keydown", function(event) {
        if (event.key === "Enter") {
            addList();
        }
    });
    //一、最基本的功能：新增待办事项
    $(".newItem_btn").on("click", addList);

    //二、删除：待办、已完成事项
    $(".list_tobeProcessed,.list_processed").on("click", ".deleteBtn", function() { //问题：动态按钮添加后添加监听需要用on父元素然后第二个参数加在子元素上
        // console.log(this);
        $(this).parent().stop().slideUp("slow", function() {
            //回调函数在上拉隐藏结束后直接删除此事件
            $(this).remove(); //问题：这时的this已经变成了执行slideup的li
        });
        // $(this).parent().remove();移入回调函数
    });

    //三、待办完成点击按钮，移入已完成
    $(".list_tobeProcessed,.list_processed").on("change", ".complete_box", function() {
        // console.log($(this).prop("checked"));
        var changed_todo = $(this).parent();
        //思考：这里的下拉动画怎么添加，解决，先上拉再回调函数添加到另一个里面再下拉
        if ($(this).prop("checked")) {
            changed_todo.stop().slideUp("fast", function() {
                $(".list_processed").prepend(changed_todo);
            });
            changed_todo.slideDown("fast");
        } else {
            changed_todo.stop().slideUp("slow", function() {
                $(".list_tobeProcessed").prepend(changed_todo);
            });
            changed_todo.slideDown("slow");
        }
        // 
        // localStorage.setItem("liitems", "<li>1</li>", {
        //     maxAge: 1000 * 60 * 60
        // })
    });

    //四、折叠/展开功能
    $(".title_tbp a,.title_processed a").on("click", function() {
        var p_ul = $(this).parent().siblings("ul");
        if ($(p_ul).css("display") === "block") {
            p_ul.hide("fast");
        } else {
            p_ul.stop().show("slow");
        }
    });
});